<script setup>
import { ref } from "vue";
import { theme } from "ant-design-vue";
import emitter from "@/utils/emitter";

const currentTheme = ref({
  token: {
    colorPrimary: "#ff7300",
  },
  algorithm: theme.defaultAlgorithm,
});

emitter.on("theme-change", (event) => {
  if (event === "dark") {
    currentTheme.value.algorithm = theme.darkAlgorithm;
  } else if (event === "light") {
    currentTheme.value.algorithm = theme.defaultAlgorithm;
  }
});
</script>

<template>
  <a-config-provider :theme="currentTheme">
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'fade'" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </a-config-provider>
</template>

<style scoped lang="scss">
.default-enter-active,
.default-leave-active {
  transition: opacity 0.5s ease;
}
.default-enter-from,
.default-leave-to {
  opacity: 0;
}
</style>
